(function() {
    let dt = {
        // 初始化
        init() {
            this.letfImg = document.querySelector('.left-box .big-img')
            this.editInput = document.querySelector('.edit-text>input')
            this.leftText = document.querySelector('.left-text')
            this.colorPicker = document.querySelector('#colorpicker')
            this.downloadBtn = document.querySelector('.download')
            this.uploadBtn = document.querySelector('.upload')
            this.text = '大家好'
            this.textColor = '#000'
            this.textSize = 20

            this.tab()
            this.edit()
            this.drag(this.leftText)
            this.drag(this.letfImg)
            this.download()
            this.upload()
        },
        // 点击切换
        tab() {
            this.lis = document.querySelectorAll('.img-list li')
            this.last = this.lis[0]
            this.lis.forEach(li => li.onclick = () => {
                this.last.className = ''
                li.className = 'active-li'
                this.letfImg.src = li.children[0].src
                this.last = li
            })
        },
        // 编辑文字
        edit() {
            this.editInput.oninput = () => {
                this.leftText.innerHTML = this.text = this.editInput.value
            }

            let fontSizeInput = document.querySelector('.font-style>input')

            fontSizeInput.onchange = () => {
                this.textSize = fontSizeInput.value
                this.leftText.style.fontSize = fontSizeInput.value + 'px'
            }

            this.colorPicker.onchange = () => {
                this.leftText.style.color = this.textColor = this.colorPicker.value

            }
        },
        // 拖动
        drag(obj) {
            let startX = 0, //起始鼠标坐标
                startY = 0, //结束鼠标坐标
                startL = 0, //起始元素离定位容器左边距离
                startT = 0,
                curX = 0, //元素拖动后的坐标
                curY = 0

            obj.onmousedown = e => {
                startX = e.clientX;
                startY = e.clientY;
                startL = obj.offsetLeft;
                startT = obj.offsetTop;
                document.onmousemove = (ev) => {
                    // 计算拖动后坐标
                    curX = ev.clientX - startX + startL
                    curY = ev.clientY - startY + startT
                    if (curX < 0) {
                        curX = 0
                    }
                    if (curY < 0) {
                        curY = 0
                    }
                    // clientWidth 不包含边框
                    //offsetWidth 包含边框
                    let objLeft = obj.parentNode.clientWidth - obj.offsetWidth
                    if (curX > objLeft) {
                        curX = objLeft
                    }
                    let objTop = obj.parentNode.clientHeight - obj.offsetHeight
                    if (curY > objTop) {
                        curY = objTop
                    }
                    obj.style.left = curX + 'px'
                    obj.style.top = curY + 'px'
                    ev.preventDefault() //阻止默认行为

                }
                document.onmouseup = () => document.onmousemove = null
            }
        },
        // 画图
        draw(cb) {
            let canvas = document.createElement('canvas')
            let context = canvas.getContext('2d')
            canvas.width = 500
            canvas.height = 388
            let img = new Image()
            img.src = this.letfImg.src
            img.onload = () => {
                // 图片位置
                let imgX = parseFloat(getComputedStyle(this.letfImg).left)
                let imgY = parseFloat(getComputedStyle(this.letfImg).top)
                    // 图片宽高
                let imgWidth = this.letfImg.offsetWidth
                let imgHeight = this.letfImg.offsetHeight

                let textX = parseFloat(getComputedStyle(this.leftText).left)
                let textY = parseFloat(getComputedStyle(this.leftText).top)

                context.drawImage(img, imgX, imgY, imgWidth, imgHeight)
                    // 画文字
                context.font = ` bold ${this.textSize}px Microsoft YaHei `
                context.fillStyle = this.textColor
                context.textBaseline = 'top'
                context.fillText(this.text, textX, textY + 5)
                    // 水印
                context.font = `14px Microsoft YaHei`
                context.fillStyle = '#ccc'
                context.fillText('CodingFXJ', 420, 360)

                cb(canvas.toDataURL())
            }
        },
        download() {
            this.downloadBtn.onclick = () => {
                var alink = document.createElement('a')
                alink.style.display = 'none'
                alink.download = 'dt'
                document.body.appendChild(alink)
                this.draw(url => {
                    alink.href = url
                    alink.click() //主动触发a标签下载
                    document.body.removeChild(alink)
                })
            }
        },
        upload() {
            var fileInput = document.createElement('input')
            fileInput.type = 'file'
            fileInput.accept = "image/png,image/gif,image/jpeg"
            fileInput.style.display = 'none'
            this.uploadBtn.onclick = () => {
                document.body.appendChild(fileInput)
                fileInput.click()
            }
            fileInput.oninput = e => {
                console.log('e: ', e);
                let file = e.target.files[0]
                let fr = new FileReader()
                fr.readAsDataURL(file) //通过地址读取文件
                fr.onload = e => {
                    this.letfImg.src = e.target.result
                    this.last.className = ''
                }
                document.body.removeChild(fileInput)



            }
        }


    }

    dt.init()

})()